<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @refresh-change="refreshChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad">
      <template slot-scope="{row}" slot="logDetailForm">
        <section>
          <el-input
            type="textarea"
            v-model="row.logDetail"
            :rows="20">
          </el-input>
          <el-button type="primary" class="mt-2" @click="downloadLogDetail(row.logId)" icon="el-icon-document">下载日志详情</el-button>
        </section>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>

    import {mapGetters} from "vuex";
    import {getList,getDetail} from "@/youan/api/kettle/log";
    import {getToken} from '@/util/auth'

    export default {
      name: "logConfig",
      data() {
        return {
          loading: true,
          form: {},
          query: {
            taskName: this.$route.params.taskName || ''
          },
          page: {
            pageSize: 10,
            currentPage: 1,
            total: 0
          },
          option:{
            tip: false,
            border: true,
            index: true,
            viewBtn: true,
            dialogType: 'drawer',
            dialogClickModal: false,
            calcHeight: 90,
            searchMenuSpan: 6,
            labelWidth: 150,
            column: [
              {
                prop: "logId",
                display: false,
                showColumn: false,
                hide: true
              },
              {
                label: "定时器名称",
                prop: "taskName",
                span: 24,
                search: true,
                searchLabelWidth: 120,
                display: true,
                searchValue: this.$route.params.taskName || ''
              },
              {
                label: "状态",
                prop: "status",
                type: 'select',
                search: true,
                width: 120,
                dicUrl: "/api/blade-system/dict-biz/dictionary?code=LOGSTATUS",
                props: {
                  label: "dictValue",
                  value: "dictKey"
                },
                display: false,
                formatter: (row,value) => {
                  if(0 == value) {
                    return `<span class="warning">运行中</span>`
                  }else if(1 == value){
                    return `<span class="success">成功</span>`
                  }else {
                    return `<span class="danger">失败</span>`
                  }
                }
              },
              {
                label: "运行开始时间",
                prop: "startTime",
                type: "datetime",
                searchLabelWidth: 120,
                search: true,
                searchRange:true,
                formatter: "yyyy-MM-dd HH:mm:ss",
                valueFormat: "yyyy-MM-dd HH:mm:ss",
                display: true
              },
              {
                label: "运行结束时间",
                prop: "endTime",
                type: "datetime",
                searchLabelWidth: 120,
                formatter: "yyyy-MM-dd HH:mm:ss",
                valueFormat: "yyyy-MM-dd HH:mm:ss",
                display: true
              },
              {
                label: "运行时长",
                prop: "runTime",
                width: 160,
                display: false,
                formatter: (row) => {
                  let runTimeFormatter = "";
                  let runTime = new Date(row.endTime).getTime() - new Date(row.startTime).getTime();
                  let hours = Math.floor(runTime/(3600*1000));
                  if(hours >= 1) {
                    runTimeFormatter += hours + "小时";
                  }
                  //计算相差分钟数
                  let leave1 = runTime % (3600*1000)    //计算小时数后剩余的毫秒数
                  let minutes = Math.floor(leave1/(60*1000))//计算相差分钟数
                  if(minutes >= 1) {
                    runTimeFormatter += minutes + "分钟";
                  }
                  //计算相差秒数
                  let leave2 = leave1 % (60*1000)      //计算分钟数后剩余的毫秒数
                  let seconds = Math.round(leave2/1000)
                  if(seconds >= 1) {
                    runTimeFormatter += seconds + "秒";
                  }
                  if(!runTimeFormatter) {
                    runTimeFormatter = "<1秒"
                  }
                  return runTimeFormatter;
                }
              },
              {
                label: "错误信息",
                prop: "errorMessage",
                span:24,
                type: "textarea",
                overHidden: true,
                display: true
              },
              {
                label: "结果",
                prop: "result",
                span: 24,
                type: "textarea",
                hide: true,
                showColumn: false,
              },
              {
                label: "日志",
                prop: "logDetail",
                span: 24,
                type: "textarea",
                hide: true,
                showColumn: false,
                formslot:true,
                labelslot:true,
                errorslot:true,
              },
            ]
          },
        }
      },
      computed: {
        ...mapGetters(["userInfo", "permission"]),
        permissionList() {
          return {
            addBtn: this.vaildData(this.permission.kettleLog_add, false),
            viewBtn: this.vaildData(this.permission.kettleLog_view, false),
            delBtn: this.vaildData(this.permission.kettleLog_delete, false),
            editBtn: this.vaildData(this.permission.kettleLog_edit, false)
          };
        },
      },
      methods: {
        beforeOpen(done, type) {
          if (["edit", "view"].includes(type)) {
            getDetail(this.form.logId).then(res => {
              this.form = res.data.data;
            });
          }
          done();
        },
        selectionChange(list) {
          this.selectionList = list;
        },
        currentChange(currentPage) {
          this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
          this.page.pageSize = pageSize;
        },
        refreshChange() {
          this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
          const {startTime} = params;
          let values = {
            ...params,
          };
          if (startTime) {
            values = {
              ...params,
              startTime_datege: startTime[0],
              startTime_datelt: startTime[1],
            };
            values.startTime = null;
            this.query.startTime = null;
          }
          this.loading = true;
          getList(page.currentPage, page.pageSize, 'start_time' ,Object.assign(values, this.query), this.treeDeptId).then(res => {
            const data = res.data.data;
            this.page.total = data.total;
            this.data = data.records;
            this.loading = false;
            this.selectionClear();
          });
        },
        selectionClear() {
          this.selectionList = [];
          this.$refs.crud.toggleSelection();
        },
        searchReset() {
          this.query = {};
          this.onLoad(this.page);
        },
        searchChange(params, done) {
          this.query = params;
          this.page.currentPage = 1;
          this.onLoad(this.page, params);
          done();
        },
        downloadLogDetail(logId) {
          window.open(`/api/kettle/tasklog/downloadLogDetail/${logId}?Blade-Auth=${getToken()}`);
        }
      },
    }
</script>

<style scoped>

</style>
